<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="common/head::head">
</head>

<body>
<table class="layui-table" id="tab_user" lay-filter="tab_user" style="margin: 0;"></table>
<script type="text/html" id="bar_projects">
    <a href="javascript:;" class="layui-btn  layui-btn-sm layui-btn-normal" lay-event="view">详情</a>
</script>
<script type="text/html" id="showBox">
    <div style="padding: 10px;">
        <div class="layui-card">
            <div class="layui-card-header">浏览器标识</div>
            <div class="layui-card-body">
                {{ d.userAgent }}
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">请求参数</div>
            <div class="layui-card-body">
                {{ d.reqData }}
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">响应结果</div>
            <div class="layui-card-body">
                {{ d.resultMsg }}
            </div>
        </div>
    </div>
</script>
</body>

<script type="text/html" id="toolbarDemo">
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-bottom: 0;">
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto !important;">时间</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" readonly class="layui-input" id="time" placeholder="请选择时间范围">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto !important;">节点</label>
                <div class="layui-input-inline">
                    <select name="selectNode" id="selectNode" lay-verify="required" lay-filter="selectNode"
                            lay-search="">
                        <option value="">请选择</option>
                        <option value="-">无节点操作</option>
                        <option th:each="item : ${nodeArray}" th:value="${item.id}" th:text="${item.name}"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto !important;">用户</label>
                <div class="layui-input-inline">
                    <select name="selectUser" id="selectUser" lay-verify="required" lay-filter="selectUser"
                            lay-search="">
                        <option value="">请选择</option>
                        <option th:each="item : ${userArray}" th:value="${item.id}" th:text="${item.name}"></option>
                        <option value="system">系统管理员</option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/javascript">
    const apiWhere = {};
    var laydate;
    var col = [
        {field: 'userId', title: '操作者'},
        {field: 'ip', title: '操作ip'},
        {field: 'nodeId', title: '节点Id'},
        {field: 'dataId', title: '数据Id'},
        {field: 'optTypeMsg', title: '操作类型'},
        {field: 'optStatusMsg', title: '执行结果'},
        {
            field: 'optTime', title: '操作时间', templet: function (d) {
                return formateTime(d.optTime);
            }
        },
        {field: 'op', title: '操作', align: 'center', toolbar: '#bar_projects', fixed: 'right'}
    ];

    function loadSuccess() {
        tableRender({
            id: 'tab_user',
            elem: '#tab_user',
            url: './list_data.json',
            toolbar: '#toolbarDemo',
            page: true,
            where: apiWhere,
            cols: [col],
            parseData: function (data) {
                return {
                    "code": data.code,
                    "msg": data.msg,
                    "count": data.total,
                    "data": data.data
                };
            },
            done: function () {
                $("#time").val(apiWhere.time);
                renderDate();
                // 选中
                $("#selectNode option[value='" + apiWhere.selectNode + "']").attr("selected", "selected");
                $("#selectUser option[value='" + apiWhere.selectUser + "']").attr("selected", "selected");

                form.render();
            }
        });

        layui.use(['laytpl', 'laydate'], function () {
            var laytpl = layui.laytpl;
            var showBox = document.getElementById('showBox').innerHTML;
            // 表格工具条事件
            table.on('tool(tab_user)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                if ('view' === event) {
                    laytpl(showBox).render(data, function (html) {
                        layerOpen({
                            type: 1,
                            content: html,
                            scrollbar: false,
                            area: ["80%", "80%"]
                        });
                    });

                }
            });
            laydate = layui.laydate;
            renderDate();
        });

        form.on('select(selectNode)', function (data) {
            apiWhere.selectNode = data.value;
            reloadTable();
            return true;
        });

        form.on('select(selectUser)', function (data) {
            apiWhere.selectUser = data.value;
            reloadTable();
            return true;
        });
    }

    function renderDate() {
        if (!laydate) {
            return;
        }
        var now = new Date().getTime();
        laydate.render({
            elem: '#time',
            type: 'datetime',
            range: "~",
            max: now,
            done: function (value, date, endDate) {
                apiWhere.time = value;
                reloadTable();
            }
        });
    }

    function reloadTable() {
        table.reload('tab_user', {
            where: apiWhere
        });
    }
</script>
</html>
